<template>
  <div class="stat">
      <div class="head">
        <p class="headTitle">{{info.vote_title}}</p>
        <p class="headBac">{{info.vote_desc}}</p>
      </div>
      <div class="table">
        <el-row :gutter="20">
          <el-col :span="22"><div class="grid-content bg-purple"></div>
          <div class="count">
          <span>合计:{{info.record_nums}}票</span>
          <span> {{info.user_nums}}人投票</span>
          <span>平均浏览时长:{{info.avg_browse_time}}分钟</span>
        </div></el-col>
          <el-col :span="2">
             <div class="grid-content bg-purple">
                <el-button class="filter-item" type="primary" size="small">导出</el-button>
             </div>
             </el-col>
        </el-row>
        <section v-if="info.vote_type==1">
          <template>
            <el-table :data="tableList" stripe style="width: 100%">
              <el-table-column prop="option_desc" label="问题" width="180"></el-table-column>
              <el-table-column prop="scale" label="投票占比" > </el-table-column>
              <el-table-column prop="record_nums" label="投票人数"> </el-table-column>
                <el-table-column prop="vote_username" label="拖票人" > </el-table-column>
              <el-table-column prop="phone" label="手机号"> </el-table-column>
                <el-table-column prop="browse_time" label="浏览时长"> </el-table-column>
              <el-table-column prop="create_time" label="投票时间"  width="180"> </el-table-column>
            </el-table>
          </template>
        </section>
        <section v-if="info.vote_type==2">
          <template>
            <el-table :data="tableList" stripe style="width: 100%">
              <el-table-column prop="user_name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="option_code" label="编号" > </el-table-column>
              <el-table-column prop="record_nums" label="票数"> </el-table-column>
                <el-table-column prop="row_no" label="排名" > </el-table-column>
              <el-table-column prop="vote_username" label="投票人"> </el-table-column>
                <el-table-column prop="phone" label="手机号"> </el-table-column>
              <el-table-column prop="browse_time" label="浏览时长"  width="180"> </el-table-column>
               <el-table-column prop="create_time" label="投票时间"  width="180"> </el-table-column>
            </el-table>
          </template>
        </section>
        <section>
        <so-pagination :query="listQuery" @initList="initList" />
      </section>
      </div>
  </div>
</template>
<script>
import SoPagination from "@/components/SoPagination";
import { vote_dataStatisticsById } from "@/api/vote";
export default {
  components: { SoPagination },
  name: "voteStatistics",
  data () {
    return {
      info:{},
      tableList:[],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 },
    };
  },
 methods: {
  async initList(){
    let pat ={
      ...this.listQuery,
      id:this.$route.query.id
    }
    let {data} = await vote_dataStatisticsById(pat)
    if(data.status == 100){
      this.info = data.data;
      this.tableList = data.data.voteRecords
      // console.log(data.data.voteRecords.length,'data.data.voteRecords.length')
       this.listQuery.total = data.data.results;
    }
  }
 },
 created: function () {
   this.initList()
 }
}
</script>
<style lang="scss" scoped>
.stat{
   margin: 2rem;
   .head{
     background: #fff;
     padding:2rem;
    .headTitle{
       font-size: 1.5rem;
    }
    .headBac{
       font-size: 1.3rem;
       margin-top: 1rem;
    }
   }
   .table{
     margin-top: 2rem;
     .count{
       font-size: 1.3rem;
       margin-bottom: 1rem;
       span{
         margin-right: 1rem;
       }
     }
   }
}
</style>
